<template>
  <div class="page">
    <el-row>
      <el-col :span="8">
        <icon-svg style="padding: 3px;" class="svg_page" ref="prev" @mouseleave.native="handleLeave" @mouseenter.native="handlePrevEnter"
                  @click="handleClick('prev')"
                  iconClass="prev"></icon-svg>
      </el-col>
      <el-col :span="8">
        <el-link style="color: purple;" :underline="false">{{currentPage}}</el-link>
        <el-link style="margin: auto 3px;" :underline="false">/</el-link>
        <el-link style="color: #acb8cc;" :underline="false">{{total}}</el-link>
      </el-col>
      <el-col :span="8">
        <icon-svg class="svg_page" ref="next" @mouseleave.native="handleLeave" @mouseenter.native="handleNextEnter"
                  @click="handleClick('next')"
                  iconClass="next"></icon-svg>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import '../icons/next.svg'
  import '../icons/prev.svg'

  export default {
    name: 'editor',
    components: {},
    data () {
      return {
        publicPath: process.env.BASE_URL,
        currentPage: 1
      }
    },
    props: ['total'],
    created () {
    },
    mounted () {
    },
    watch: {},
    methods: {
      handleNextEnter () {
        if (this.currentPage === this.total) {
          this.handleDisabledPage('next')
        }
      },
      handleLeave () {
        this.$refs['next'].$el.style.color = '#000'
        this.$refs['prev'].$el.style.color = '#000'
      },
      handleClick (val) {
        if (this.$refs[val].$el.style.color === '#eee') {
          return
        }
        switch (val) {
          case 'prev':
            this.currentPage -= 1
            break
          case 'next':
            this.currentPage += 1
            break
          default:
            console.log('又有bug')
            break
        }
        this.$emit('currentPage', this.currentPage)
      },
      handlePrevEnter () {
        if (parseInt(this.currentPage) - 1 === 0) {
          this.handleDisabledPage('prev')
        }
      },
      handleDisabledPage (val) {
        this.$refs[val].$el.style.color = '#eee'
      }
    }
  }
</script>

<style lang="scss">
  .page .el-col{
    height: 30px;
    max-width: 40px;
    min-width: 20px;
  }
  .page .svg-icon{
    padding: 5px !important;
  }
  .svg_page{
    width: 1.5em !important;
    height: 1.5em !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
  }
  .svg_page:hover {
    cursor: pointer;
  }
</style>
